<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm="searchForm" @refresh_list="index"></Search>
						<div class="btn-group" style="margin-bottom:11px;">
             <div>
               <el-button size="small" v-loading="materialLoading" @click="reloadMaterial? getMaterialReloadResult(true): syncbom()" :icon="reloadMaterial? 'el-icon-loading': 'el-icon-refresh'">{{ reloadMaterial? '同步中，点击刷新': '' }}</el-button>
<!--               <el-button type="success"  size="mini" icon="el-icon-plus"  @click="syncbom()">同步数据</el-button>-->
<!--               <el-button type="success"  size="mini" icon="el-icon-plus"  @click="add(ids)" v-if="checkPermission('/app/Bom/add.html')" >{{$t('action.add')}}</el-button>-->
<!--               <el-button type="primary" :disabled="single" size="mini" icon="el-icon-edit"  @click="update(ids)" v-if="checkPermission('/app/Bom/update.html')" >{{$t('action.update')}}</el-button>-->
<!--               <el-button type="danger" :disabled="multiple" size="mini" icon="el-icon-delete"  @click="del(ids)" v-if="checkPermission('/app/Bom/delete.html')" >{{$t('action.delete')}}</el-button>-->
<!--               <el-button type="info" :disabled="single" size="mini" icon="el-icon-view"  @click="detail(ids)" v-if="checkPermission('/app/Bom/detail.html')" >{{$t('action.detail')}}</el-button>-->
             </div>
             <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
						</div>
					    <el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">		   
						    <el-table-column align="center" type="selection" width="42"></el-table-column>
<!--							<el-table-column align="center"  v-if="fieldList[0].checked" property="bom_id" :label="$t('field.Bom_bom_id')" show-overflow-tooltip width="70" >-->
<!--							</el-table-column>-->
<!--							<el-table-column align="center" type='' v-if="fieldList[1].checked" property="id" label="id" show-overflow-tooltip width="70">-->
<!--							</el-table-column>-->
                <el-table-column align="center" type="index" label="No." width="50" >
                </el-table-column>
							<el-table-column align="center"  v-if="fieldList[2].checked" property="fnumber" :label="$t('field.Bom_FNUMBER')" show-overflow-tooltip width="" >
							</el-table-column>
<!--							<el-table-column align="center"  v-if="fieldList[3].checked" property="fbilltype" :label="$t('field.Bom_FBILLTYPE')" show-overflow-tooltip width="" >-->
<!--							</el-table-column>-->
<!--							<el-table-column align="center"  v-if="fieldList[4].checked" property="fdocumentstatus" :label="$t('field.Bom_FDOCUMENTSTATUS')" show-overflow-tooltip width="" >-->
<!--							</el-table-column>-->
<!--							<el-table-column align="center"  v-if="fieldList[5].checked" property="fbomuse" :label="$t('field.Bom_FBOMUSE')" show-overflow-tooltip width="" >-->
<!--							</el-table-column>-->
							<el-table-column align="center"  v-if="fieldList[6].checked" property="fgroup" :label="$t('field.Bom_FGROUP')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[7].checked" property="fbomcategory" :label="$t('field.Bom_FBOMCATEGORY')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[8].checked" property="fmaterialno" :label="$t('field.Bom_FMATERIALNO')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[9].checked" property="fmaterialname" :label="$t('field.Bom_FMATERIALNAME')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[10].checked" property="fspecification" :label="$t('field.Bom_FSPECIFICATION')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[11].checked" property="funitid" :label="$t('field.Bom_FUNITID')" show-overflow-tooltip width="" >
							</el-table-column>
<!--							<el-table-column align="center"  v-if="fieldList[12].checked" property="fcreateorgid" :label="$t('field.Bom_FCREATEORGID')" show-overflow-tooltip width="" >-->
<!--							</el-table-column>-->
							<el-table-column align="center"  v-if="fieldList[13].checked" property="fcreateorgname" :label="$t('field.Bom_FCREATEORGNAME')" show-overflow-tooltip width="" >
							</el-table-column>
<!--							<el-table-column align="center"  v-if="fieldList[14].checked" property="fuseorgid" :label="$t('field.Bom_FUSEORGID')" show-overflow-tooltip width="" >-->
<!--							</el-table-column>-->
							<el-table-column align="center"  v-if="fieldList[15].checked" property="fuseorgidname" :label="$t('field.Bom_FUSEORGIDNAME')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[16].checked" property="fcreatedate" :label="$t('field.Bom_FCREATEDATE')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[17].checked" property="fmodifydate" :label="$t('field.Bom_FMODIFYDATE')" show-overflow-tooltip width="" >
							</el-table-column>
							  <el-table-column :fixed="$store.getters.device !== 'mobile'?'right':false" :label="$t('system.operation')" align="center" width="160">
								<template slot-scope="scope">
									<div v-if="scope.row.id">
										<el-button size="mini" type="success" @click="gotoDetail(scope.row)" v-if="checkPermission('/app/Bom/bomList.html')" ><i class="el-icon-edit" />{{$t('action.bomList')}}</el-button>
<!--										<el-button size="mini" type="primary" @click="update(scope.row)"  v-if="checkPermission('/app/Bom/update.html')"><i class="el-icon-edit" />{{$t('action.update')}}</el-button>-->
<!--										<el-button size="mini" type="danger" @click="del(scope.row)"  v-if="checkPermission('/app/Bom/delete.html')"><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>-->
									</div>
								</template>
							  </el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>


	    <!--添加-->
		<Add  :show.sync="dialog.addDialogStatus" size="small" @refresh_list="index"></Add>
		<!--修改-->
		<Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refresh_list="index"></Update>
		<!--查看详情-->
		<Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refresh_list="index"></Detail>
    <!--查看子项bom-->
    <BomList :info="childInfo" :show.sync="dialog.bomListDialogStatus" size="small" @refresh_list="index"></BomList>


	</div>
</template>
<script>
	import {
	    index, 
	    updateExt, 
	    getUpdateInfo,
	    del,
      sync,
      getChildList
	} from '@/api/app/bom'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
  import {checkPermission, confirm, param2Obj} from '@/utils/common'
	import Add from '@/views/app/bom/add.vue' 
	import Update from '@/views/app/bom/update.vue' 
	import Detail from '@/views/app/bom/detail.vue'
  import BomList from "@/views/app/bom/bomList.vue";
  import {getSyncReload} from "@/api/app/material";
	export default {
		name:'bom',
		components: {
			Search,
			Page,
			TableTool,
      Add,
      Update,
      Detail,
      BomList
		},
		data(){
			return {
				dialog: {
            addDialogStatus : false,
            updateDialogStatus : false,
            detailDialogStatus : false,
            bomListDialogStatus : false
				},
				fieldList:[
				    {lable:this.$t('field.Bom_bom_id'),checked:true},
					{lable:'ID',checked:true},
				    {lable:this.$t('field.Bom_FNUMBER'),checked:true},
				    {lable:this.$t('field.Bom_FBILLTYPE'),checked:true},
				    {lable:this.$t('field.Bom_FDOCUMENTSTATUS'),checked:true},
				    {lable:this.$t('field.Bom_FBOMUSE'),checked:true},
				    {lable:this.$t('field.Bom_FGROUP'),checked:true},
				    {lable:this.$t('field.Bom_FBOMCATEGORY'),checked:true},
				    {lable:this.$t('field.Bom_FMATERIALNO'),checked:true},
				    {lable:this.$t('field.Bom_FMATERIALNAME'),checked:true},
				    {lable:this.$t('field.Bom_FSPECIFICATION'),checked:true},
				    {lable:this.$t('field.Bom_FUNITID'),checked:true},
				    {lable:this.$t('field.Bom_FCREATEORGID'),checked:true},
				    {lable:this.$t('field.Bom_FCREATEORGNAME'),checked:true},
				    {lable:this.$t('field.Bom_FUSEORGID'),checked:true},
				    {lable:this.$t('field.Bom_FUSEORGIDNAME'),checked:true},
				    {lable:this.$t('field.Bom_FCREATEDATE'),checked:true},
				    {lable:this.$t('field.Bom_FMODIFYDATE'),checked:true},
				],
				ids: [],
				selectRows:[],
				selectTotal:0,
				single:true,
				multiple:true,
				list: [],
				small_tables:{},
        addInfo:{},
        updateInfo:{},
        detailInfo:{},
        childInfo:{},
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
				searchVisible:true,
				searchForm:[],
				searchData:{},
        materialLoading: false,
        reloadMaterial: false,

			}
		},
		methods: {
      /**
       * 获取加载按钮的加载中状态
       */
      getMaterialReloadResult(showMsg) {
        this.materialLoading = true
        try {
          getSyncReload({type:"BOM"}).then(res =>{
            // if (!res.res) return
            console.log(res)

            if (res.data.reloadOrder) {
              this.$message.info('bom数据同步中')
            } else {
              if (res.data.reloadRes) {
                this.$message.success('已同步完成, 请刷新查看最新结果')
              } else {
                this.$message.error('同步失败，' + this.reloadMsg)
              }
            }

          })

        } finally {
          this.materialLoading = false
        }
      },
      checkPermission() {
        return checkPermission
      },
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page}
				Object.assign(param, this.searchData,param2Obj(this.$route.fullPath))
				this.loading = true
				index(param).then(res => {
					this.list = res.data.data
					this.small_tables=res.sql_field_data
					this.page_data.total = res.data.total
					this.loading = false
					if(this.page_data.page == 1){
						this.searchForm = [
						        {type:'Input',label:this.$t('field.Bom_FNUMBER'),prop:'FNUMBER',width:'150px'},   
						        {type:'Input',label:this.$t('field.Bom_FDOCUMENTSTATUS'),prop:'FDOCUMENTSTATUS',width:'150px'},   
						        {type:'Input',label:this.$t('field.Bom_FGROUP'),prop:'FGROUP',width:'150px'},   
						        {type:'Input',label:this.$t('field.Bom_FMATERIALNO'),prop:'FMATERIALNO',width:'150px'},   
						        {type:'Input',label:this.$t('field.Bom_FMATERIALNAME'),prop:'FMATERIALNAME',width:'150px'},   
						        {type:'Input',label:this.$t('field.Bom_FSPECIFICATION'),prop:'FSPECIFICATION',width:'150px'},   
						        {type:'Input',label:this.$t('field.Bom_FCREATEORGNAME'),prop:'FCREATEORGNAME',width:'150px'},   
						]
					}
				})
			},
			updateExt(row,field){
				if(row.id){
					updateExt({id:row.id,[field]:row[field]}).then(res => {
						this.$message({message: this.$t('system.success'), type: 'success'})
					})
				}
			},
			add(){
				this.dialog.addDialogStatus = true
			},
			update(row){
				let id = row.id ? row.id : this.ids.join(',')
				getUpdateInfo({id:id}).then(res => {
					if(res.status == 200){
						this.dialog.updateDialogStatus = true
						this.updateInfo = res.data
					}
				})
			},
			del(row){
				confirm({content:this.$t('system.confirmOperation')}).then(() => {
					let ids = row.id ? row.id : this.ids.join(',')
					del({id:ids}).then(res => {
						this.$message({message: this.$t(res.msg), type: 'success'})
						this.index()
					})
				}).catch(() => {})
			},
			detail(row){
				this.dialog.detailDialogStatus = true
				this.detailInfo = {id:row.id ? row.id : this.ids.join(',')}
			},
			selection(selection) {
			    this.selectRows=selection
			    this.selectTotal=selection.length
				this.ids = selection.map(item => item.id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex,event){
				if(event.target.className !== 'el-input__inner'){
					this.$refs.multipleTable.toggleRowSelection(row)
				}
			},
			rowClass ({ row, rowIndex }) {
				for(let i=0;i<this.ids.length;i++) {
					if (row.id === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
      async syncbom(){
        try {
          let msg = '同步bom，耗时较长，是否继续执行？';
          await this.$confirm(msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            dangerouslyUseHTMLString: true
          })
        } catch(e) {
          return
        }
        try {
          this.reloadMaterial = true
          sync().then(res => {
            if (!res.res) return
            this.$message.success('已经开始同步')
          })

        } finally {
          this.loading = false
        }
      },
      //展示子项bom
      gotoDetail(e){
        this.dialog.bomListDialogStatus = true
        this.childInfo = {id : e.id}
      },
		},	
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>